<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="h-ui-font/iconfont.min.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/weui.min.css" />

		<style type="text/css">
			body {
				width: 100%;
				margin: 0px auto;
				min-width: 320px;
				max-width: 640px;
			}
			
			.top {
				width: 100%;
				height: 50px;
				min-width: 320px;
				max-width: 640px;
				line-height: 50px;
				color: white;
				font-size: 18px;
				text-indent: 10px;
				position: fixed;
				z-index: 2;
				background-color: #0F88EB;
			}
			
			.swiper-container {
				border: 1px solid;
				height: 160px;
				width: 100%;
				border-top: 5px solid #c0c0c0;
			}
			
			.swiper-container img {
				width: 100%;
				height: 100%;
			}
			
			.contents {
				width: 100%;
				padding-top: 50px;
				padding-bottom: 40px;
				overflow: auto;
				/*border: 1px solid red;*/
			}
			
			.item,
			.contentsTitle {
				box-sizing: border-box;
				width: 100%;
				display: inline-block;
				color: black;
				padding: 5px 10px;
			}
			
			.contentsTitle {
				border-top: 5px solid #c0c0c0;
				font-size: 14px;
			}
			
			.contentsTitle p:last-child {
				font-size: 12px;
				color: #c6c6c6;
				border-bottom: 1px solid #c8c8c8;
			}
			
			.itemtitle {
				font-size: 14px;
			}
			.itemtitle h1{
				font-size: 14px !important;
			}
			.itemcontent {
				height: 100%;
				margin-top: 5px;
				font-size: 12px;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal !important;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			.itemcontent img{
				width: 100%;
			}
			.itemtext {
				height: 20px;
				font-size: 12px;
				color: #c6c6c6;
				margin-top: 5px;
				border-bottom: 1px solid #c8c8c8;
			}
			
			.itemtext span {
				margin-left: 5px;
			}
			
			.itemtext span:first-child {
				margin-left: 0px;
			}
			
			.weui-tabbar {
				min-width: 320px;
				max-width: 640px;
				height: 40px;
				position: fixed;
			}
			
			.weui-tabbar__icon {
				margin-top: -4px;
			}
			
			.active {
				color: rgba(0, 0, 255, 0.8) !important;
			}
		</style>
	</head>

	<body>
		<div class="top">发现</div>
		<div class="contents">
			<div class="swiper-container">
				<!-- Additional required wrapper -->
				<div class="swiper-wrapper">
					<!-- Slides -->
					<div class="swiper-slide"><img src="img/3510104ee040833d1dc97e0d8c5bb26e.jpeg" /></div>
					<div class="swiper-slide"><img src="img/516144ad0aacf399dcf6b0fb458c9c18.jpg" /></div>
					<div class="swiper-slide"><img src="img/b8d1deff9d6cee6d02205b5901641e95.jpg" /></div>
				</div>

			</div>
			<div class="contentsTitle">
				<p>热门内容</p>
				<p>24小时内热门回答及文章</p>
			</div>
			<a href="javascript:;" class="item" v-for="item in list" @click='index($index)'>
				<div class="itemtitle" v-html="item.title"></div>
				<div class="itemcontent" v-html="item.context"></div>
				<div class="itemtext"><span v-html="item.n_zan"></span>赞同<span v-html="item.n_ping"></span>评论<span>关注问题</span></div>
			</a>

		</div>
		<div class="weui-tabbar">
			<a href="index.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="Hui-iconfont Hui-iconfont-canshu"></i>
				</div>
			</a>
			<a href="find.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="Hui-iconfont Hui-iconfont-yanjing active"></i>
				</div>
			</a>
			<a href="chart.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="Hui-iconfont Hui-iconfont-xiaoxi1"></i>
				</div>
			</a>
			<a href="more.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="Hui-iconfont Hui-iconfont-menu"></i>
				</div>
			</a>
		</div>
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue(1).js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".swiper-container").swiper({
				loop: true,
				autoplay: 3000
			});
			var ss;
			var dd;
			$.ajax({
				type: 'get',
				url: "http://v2.mashupcloud.cn/developer/auth.do",
				data: {
					appkey: 'FvWrIYOQoTUYVbscUNQoQAVqsLnZqKEN',
					appsecret: 'ugCfcSmyLkcbCGfIuFOPEgTgPQPbyJSE'
				},
				success: function(json) {
					console.log(json)
					ss = JSON.parse(json)[1];
					dd = JSON.parse(json)[2];
					$.ajax({
						type: 'get',
						url: "http://v2.mashupcloud.cn/SQL/sele_tie_zan/",
						data: {
							appid: dd,
							token: ss,
							name: 'sele_tie_zan'
						},
						success: function(json) {
							var vue = new Vue({
								el: "body",
								data: {
									list: JSON.parse(json)[2]
								},
								methods: {
									index: function(index) {
										console.log(index)
										location.href = "content.html?" + "index=" + encodeURI(this.list[index].id);
									}
								}
							})
							//						console.log(JSON.parse(json)[2])
						},
						error: function(json) {
							console.log("失败");
						}
					});
				}
			});
		</script>
	</body>

</html>